<template>
<!--    每个template标签下只能有一个根节点-->
    <div>
        <table>
            <tr>
                <td>编号</td>
                <td>书名</td>
                <td>作者</td>
            </tr>
            <tr v-for="item in books">
                <td>{{item.isbn}}</td>
                <td>{{item.bookName}}</td>
                <td>{{item.author}}</td>
            </tr>
        </table>

    </div>
</template>

<script>
    export default {
        name: "Book",
        //测试数据
        data(){
            return {
                books:[
                    {
                        isbn:1,
                        bookName:"java",
                        author:"zhangsan"
                    },
                    {
                        isbn:2,
                        bookName:"mysql",
                        author:"lisi"
                    },
                    {
                        isbn:3,
                        bookName:"linux",
                        author:"wangwu"
                    }
                ]
            }
        },
        //创建时加载
        created() {
            const _this = this;
            //请求后端数据
            axios.get('http://localhost:8081/books').then(function (resp) {
                _this.books = resp.data;
            })
        }
    }
</script>

<style scoped>

</style>